Component org.nuxeo.theme.editor.ui

Documentation

Contributions to the NXThemes Theme Editor. All web features and resources specific to the Theme Editor are registered here.
Contributions

XML Source

<?xml version="1.0"?>

<component name="org.nuxeo.theme.editor.ui">
  <documentation>
    Contributions to the NXThemes Theme Editor. All web features and
    resources specific to the Theme Editor are registered here.
    @author Jean-Marc Orliaguet (jmo@chalmers.se)
  </documentation>

  <require>org.nuxeo.theme.core</require>
  <require>org.nuxeo.theme.webengine</require>

  <!-- NXP-12846: disable access keys to the deprecated theme editor -->
  <!--
    <extension target="org.nuxeo.theme.services.ThemeService"
    point="shortcuts">

    <shortcut key="-" target="${org.nuxeo.ecm.contextPath}/nxthemes-select?engine=editor" />

    <shortcut key="_" target="${org.nuxeo.ecm.contextPath}/nxthemes-select?engine=editor" />

    <shortcut key="t" target="${org.nuxeo.ecm.contextPath}/nxthemes-select?engine=editor" />

    </extension>
  -->

  <extension target="org.nuxeo.theme.services.ThemeService"
    point="resources">

    <resource name="nxthemes-editor.js">
      <path>nxthemes/editor/scripts/nxthemes-editor.js</path>
      <require>nxthemes.js</require>
      <require>nxthemes-effects.js</require>
    </resource>

    <resource name="jscolor.js">
      <path>nxthemes/editor/scripts/jscolor.js</path>
    </resource>

    <resource name="nxthemes-editor.css">
      <path>nxthemes/editor/styles/nxthemes-editor.css</path>
    </resource>

    <resource name="theme-editor.json">
      <path>
        nxthemes/editor/models/theme-editor.json
      </path>
    </resource>

    <resource name="element-mover.json">
      <path>
        nxthemes/editor/controllers/element-mover.json
      </path>
    </resource>

    <resource name="color-picker.json">
      <path>
        nxthemes/editor/controllers/color-picker.json
      </path>
    </resource>

    <resource name="toolbox-mover.json">
      <path>
        nxthemes/editor/controllers/toolbox-mover.json
      </path>
    </resource>

    <resource name="editor-perspectives.json">
      <path>
        nxthemes/editor/controllers/editor-perspectives.json
      </path>
    </resource>

    <resource name="dashboard-perspectives.json">
      <path>
        nxthemes/editor/controllers/dashboard-perspectives.json
      </path>
    </resource>

    <resource name="editor-buttons.json">
      <path>
        nxthemes/editor/controllers/editor-buttons.json
      </path>
    </resource>

    <resource name="theme-buttons.json">
      <path>
        nxthemes/editor/controllers/theme-buttons.json
      </path>
    </resource>

    <resource name="fragment-inserter.json">
      <path>
        nxthemes/editor/controllers/fragment-inserter.json
      </path>
    </resource>

    <resource name="perspective-selector.json">
      <path>
        nxthemes/editor/controllers/perspective-selector.json
      </path>
    </resource>

    <resource name="element-editor-perspectives.json">
      <path>
        nxthemes/editor/controllers/element-editor-perspectives.json
      </path>
    </resource>

    <resource name="element-form-actions.json">
      <path>
        nxthemes/editor/controllers/element-form-actions.json
      </path>
    </resource>

    <resource name="fragment-factory-expander.json">
      <path>
        nxthemes/editor/controllers/fragment-factory-expander.json
      </path>
    </resource>

    <resource name="page-switcher.json">
      <path>
        nxthemes/editor/controllers/page-switcher.json
      </path>
    </resource>

    <resource name="area-style-actions.json">
      <path>
        nxthemes/editor/controllers/area-style-actions.json
      </path>
    </resource>

    <resource name="area-style-perspectives.json">
      <path>
        nxthemes/editor/controllers/area-style-perspectives.json
      </path>
    </resource>

    <resource name="layout-editor-actions.json">
      <path>
        nxthemes/editor/controllers/layout-editor-actions.json
      </path>
    </resource>

    <resource name="style-editor-perspectives.json">
      <path>
        nxthemes/editor/controllers/style-editor-perspectives.json
      </path>
    </resource>

    <resource name="style-editor-actions.json">
      <path>
        nxthemes/editor/controllers/style-editor-actions.json
      </path>
    </resource>

    <resource name="style-preview.json">
      <path>
        nxthemes/editor/views/style-preview.json
      </path>
    </resource>

    <resource name="style-manager-actions.json">
      <path>
        nxthemes/editor/controllers/style-manager-actions.json
      </path>
    </resource>

    <resource name="fragment-preview.json">
      <path>
        nxthemes/editor/views/fragment-preview.json
      </path>
    </resource>

    <resource name="canvas-mode-selector.json">
      <path>
        nxthemes/editor/controllers/canvas-mode-selector.json
      </path>
    </resource>

    <resource name="theme-switcher.json">
      <path>
        nxthemes/editor/controllers/theme-switcher.json
      </path>
    </resource>

    <resource name="context-menu-actions.json">
      <path>
        nxthemes/editor/controllers/context-menu-actions.json
      </path>
    </resource>

    <resource name="context-menu.json">
      <path>nxthemes/editor/views/context-menu.json</path>
    </resource>

    <resource name="toggle-context-menu.json">
      <path>
        nxthemes/editor/controllers/toggle-context-menu.json
      </path>
    </resource>

    <resource name="link-disabler.json">
      <path>
        nxthemes/editor/controllers/link-disabler.json
      </path>
    </resource>

    <resource name="preset-menu.json">
      <path>nxthemes/editor/views/preset-menu.json</path>
    </resource>

    <resource name="style-menu.json">
      <path>nxthemes/editor/views/style-menu.json</path>
    </resource>

    <resource name="style-manager-actions.json">
      <path>
        nxthemes/editor/controllers/style-manager-actions.json
      </path>
    </resource>

  </extension>

  <extension target="org.nuxeo.theme.services.ThemeService"
    point="standalone-filters">

    <standalone-filter name="control fragment visibility">
      <engine>page-editor</engine>
      <class>
        org.nuxeo.theme.editor.filters.FragmentVisibility
      </class>
    </standalone-filter>

    <standalone-filter name="set element id">
      <engine>page-editor</engine>
      <class>org.nuxeo.theme.editor.filters.ElementUid</class>
    </standalone-filter>

    <standalone-filter name="make draggable">
      <engine>page-editor</engine>
      <class>org.nuxeo.theme.editor.filters.Draggable</class>
    </standalone-filter>

    <standalone-filter name="remove scripts">
      <engine>page-editor</engine>
      <class>
        org.nuxeo.theme.editor.filters.ScriptRemover
      </class>
    </standalone-filter>

    <standalone-filter name="insert json model">
      <engine>page-editor</engine>
      <class>org.nuxeo.theme.editor.filters.JSONModel</class>
    </standalone-filter>

    <standalone-filter name="create initial section">
      <engine>page-editor</engine>
      <class>
        org.nuxeo.theme.editor.filters.CreateInitialSection
      </class>
    </standalone-filter>

    <standalone-filter name="add identifiable container">
      <engine>fragments-only</engine>
      <class>
        org.nuxeo.theme.editor.filters.IdentifiableContainer
      </class>
    </standalone-filter>

  </extension>

  <extension target="org.nuxeo.theme.services.ThemeService"
    point="views">

    <!-- Freemarker Views -->

    <view name="theme view" template-engine="freemarker">
      <engine>editor</engine>
      <element-type>theme</element-type>
      <format-type>widget</format-type>
      <template>
        nxthemes/editor/widgets/fm/theme-view.xml
      </template>
      <resource>nxthemes.css</resource>
      <resource>nxthemes-widgets.js</resource>
      <resource>nxthemes-controllers.js</resource>
      <resource>nxthemes-editor.js</resource>
      <resource>nxthemes-editor.css</resource>
      <resource>jscolor.js</resource>
    </view>

    <view name="theme view" template-engine="freemarker">
      <engine>page-editor</engine>
      <element-type>theme</element-type>
      <format-type>widget</format-type>
      <template>
        nxthemes/editor/widgets/fm/theme-view-page-editor.xml
      </template>
    </view>

    <view name="page frame" template-engine="freemarker">
      <engine>page-editor</engine>
      <element-type>page</element-type>
      <format-type>widget</format-type>
      <template>
        nxthemes/editor/widgets/fm/page-frame.xml
      </template>
    </view>

    <view name="page frame" template-engine="freemarker">
      <engine>page-editor</engine>
      <mode>area-styles-page</mode>
      <element-type>page</element-type>
      <format-type>widget</format-type>
      <class>org.nuxeo.theme.editor.views.PageFrameAreaStyle</class>
    </view>

    <view name="page frame" template-engine="freemarker">
      <engine>page-editor</engine>
      <mode>area-styles-section</mode>
      <element-type>page</element-type>
      <format-type>widget</format-type>
      <template>
        nxthemes/editor/widgets/fm/page-frame.xml
      </template>
    </view>

    <view name="page frame" template-engine="freemarker">
      <engine>page-editor</engine>
      <mode>area-styles-cell</mode>
      <element-type>page</element-type>
      <format-type>widget</format-type>
      <template>
        nxthemes/editor/widgets/fm/page-frame.xml
      </template>
    </view>

    <view name="section frame" template-engine="freemarker">
      <engine>page-editor</engine>
      <element-type>section</element-type>
      <format-type>widget</format-type>
      <template>
        nxthemes/editor/widgets/fm/section-frame.xml
      </template>
    </view>

    <view name="section frame" template-engine="freemarker">
      <engine>page-editor</engine>
      <mode>area-styles-section</mode>
      <element-type>section</element-type>
      <format-type>widget</format-type>
      <class>org.nuxeo.theme.editor.views.SectionFrameAreaStyle</class>
    </view>

    <view name="cell frame" template-engine="freemarker">
      <engine>page-editor</engine>
      <element-type>cell</element-type>
      <format-type>widget</format-type>
      <class>
        org.nuxeo.theme.editor.views.CellFrameWidget
      </class>
    </view>

    <view name="cell frame" template-engine="freemarker">
      <engine>page-editor</engine>
      <mode>area-styles-cell</mode>
      <element-type>cell</element-type>
      <format-type>widget</format-type>
      <class>org.nuxeo.theme.editor.views.CellFrameAreaStyle</class>
    </view>

    <view template-engine="freemarker">
      <engine>page-editor</engine>
      <mode>layout</mode>
      <element-type>section</element-type>
      <format-type>layout</format-type>
      <class>
        org.nuxeo.theme.editor.views.SectionLayout
      </class>
    </view>

    <view template-engine="freemarker">
      <engine>page-editor</engine>
      <mode>layout</mode>
      <element-type>cell</element-type>
      <format-type>layout</format-type>
      <class>org.nuxeo.theme.editor.views.CellLayout</class>
    </view>

    <!-- Override the default style view in layout mode-->
    <view template-engine="freemarker">
      <engine>page-editor</engine>
      <mode>layout</mode>
      <format-type>style</format-type>
      <class>org.nuxeo.theme.html.filters.BypassView</class>
    </view>

    <!-- Default view when no widget is available -->
    <view template-engine="freemarker">
      <engine>page-editor</engine>
      <element-type>fragment</element-type>
      <format-type>widget</format-type>
      <class>org.nuxeo.theme.editor.views.UnregisteredWidget</class>
    </view>



    <!--  JSF/Facelets views -->

    <view name="theme view" template-engine="jsf-facelets">
      <engine>editor</engine>
      <element-type>theme</element-type>
      <format-type>widget</format-type>
      <template>
        nxthemes/editor/widgets/jsf/theme-view.xml
      </template>
      <resource>nxthemes.css</resource>
      <resource>nxthemes-widgets.js</resource>
      <resource>nxthemes-controllers.js</resource>
      <resource>nxthemes-editor.js</resource>
      <resource>nxthemes-editor.css</resource>
      <resource>jscolor.js</resource>
    </view>

    <view name="theme view" template-engine="jsf-facelets">
      <engine>page-editor</engine>
      <element-type>theme</element-type>
      <format-type>widget</format-type>
      <template>
        nxthemes/editor/widgets/jsf/theme-view-page-editor.xml
      </template>
    </view>

    <view name="page frame" template-engine="jsf-facelets">
      <engine>page-editor</engine>
      <element-type>page</element-type>
      <format-type>widget</format-type>
      <template>
        nxthemes/editor/widgets/jsf/page-frame.xml
      </template>
    </view>

    <view name="page frame" template-engine="jsf-facelets">
      <engine>page-editor</engine>
      <mode>area-styles-section</mode>
      <element-type>page</element-type>
      <format-type>widget</format-type>
      <template>
        nxthemes/editor/widgets/jsf/page-frame.xml
      </template>
    </view>

    <view name="page frame" template-engine="jsf-facelets">
      <engine>page-editor</engine>
      <mode>area-styles-cell</mode>
      <element-type>page</element-type>
      <format-type>widget</format-type>
      <template>
        nxthemes/editor/widgets/jsf/page-frame.xml
      </template>
    </view>

    <view name="page frame" template-engine="jsf-facelets">
      <engine>page-editor</engine>
      <mode>area-styles-page</mode>
      <element-type>page</element-type>
      <format-type>widget</format-type>
      <class>org.nuxeo.theme.editor.views.PageFrameAreaStyle</class>
    </view>

    <view name="section frame" template-engine="jsf-facelets">
      <engine>page-editor</engine>
      <element-type>section</element-type>
      <format-type>widget</format-type>
      <template>
        nxthemes/editor/widgets/jsf/section-frame.xml
      </template>
    </view>

    <view name="section frame" template-engine="jsf-facelets">
      <engine>page-editor</engine>
      <mode>area-styles-section</mode>
      <element-type>section</element-type>
      <format-type>widget</format-type>
      <class>org.nuxeo.theme.editor.views.SectionFrameAreaStyle</class>
    </view>

    <view name="cell frame" template-engine="jsf-facelets">
      <engine>page-editor</engine>
      <mode>area-styles-cell</mode>
      <element-type>cell</element-type>
      <format-type>widget</format-type>
      <class>org.nuxeo.theme.editor.views.CellFrameAreaStyle</class>
    </view>

    <view name="cell frame" template-engine="jsf-facelets">
      <engine>page-editor</engine>
      <element-type>cell</element-type>
      <format-type>widget</format-type>
      <class>
        org.nuxeo.theme.editor.views.CellFrameWidget
      </class>
    </view>

    <view template-engine="jsf-facelets">
      <engine>page-editor</engine>
      <mode>layout</mode>
      <element-type>section</element-type>
      <format-type>layout</format-type>
      <class>
        org.nuxeo.theme.editor.views.SectionLayout
      </class>
    </view>

    <view template-engine="jsf-facelets">
      <engine>page-editor</engine>
      <mode>layout</mode>
      <element-type>cell</element-type>
      <format-type>layout</format-type>
      <class>org.nuxeo.theme.editor.views.CellLayout</class>
    </view>

    <view template-engine="jsf-facelets">
      <engine>page-editor</engine>
      <mode>layout</mode>
      <format-type>style</format-type>
      <class>org.nuxeo.theme.html.filters.BypassView</class>
    </view>


    <view template-engine="jsf-facelets">
      <engine>page-editor</engine>
      <element-type>fragment</element-type>
      <format-type>widget</format-type>
      <class>org.nuxeo.theme.editor.views.UnregisteredWidget</class>
    </view>


  </extension>


  <extension target="org.nuxeo.theme.services.ThemeService"
    point="engines">

    <!-- This engine renders the theme editor's UI -->
    <engine name="editor">

      <renderer element="theme">
        <filter>add widget</filter>
        <filter>collect xmlns</filter>
      </renderer>

      <renderer element="page" />

      <renderer element="section" />

      <renderer element="cell" />

      <renderer element="fragment" />

    </engine>

    <!-- This engine renders the editor view of the page canvas -->
    <engine name="page-editor">

      <renderer element="theme">
        <filter>add widget</filter>
        <filter>collect xmlns</filter>
      </renderer>

      <renderer element="page">
        <filter>add widget</filter>
        <filter>collect xmlns</filter>
        <filter>set style</filter>
        <filter>set layout</filter>
        <filter>set element id</filter>
        <filter>create initial section</filter>
      </renderer>

      <renderer element="section">
        <filter>add widget</filter>
        <filter>set element name</filter>
        <filter>remove scripts</filter>
        <filter>set style</filter>
        <filter>set layout</filter>
        <filter>set element id</filter>
      </renderer>

      <renderer element="cell">
        <filter>add widget</filter>
        <filter>set element name</filter>
        <filter>set style</filter>
        <filter>set layout</filter>
        <filter>set element id</filter>
        <filter>insert json model</filter>
      </renderer>

      <renderer element="fragment">
        <filter>add widget</filter>
        <filter>set element name</filter>
        <filter>set style</filter>
        <filter>write fragment tag</filter>
        <filter>control fragment visibility</filter>
        <filter>make draggable</filter>
        <filter>set element id</filter>
        <filter>insert json model</filter>
      </renderer>

    </engine>

    <!-- This engine renders all fragments in a linearized fashion -->
    <engine name="fragments-only">

      <renderer element="theme">
        <filter>add widget</filter>
        <filter>collect xmlns</filter>
      </renderer>

      <renderer element="page">
        <filter>add widget</filter>
      </renderer>

      <renderer element="section" />

      <renderer element="cell" />

      <renderer element="fragment">
        <filter>add widget</filter>
        <filter>add identifiable container</filter>
        <filter>write fragment tag</filter>
      </renderer>

    </engine>

    <!-- This engine renders fragment previews -->
    <engine name="preview">

      <renderer element="theme" />

      <renderer element="page" />

      <renderer element="section" />

      <renderer element="cell" />

      <renderer element="fragment">
        <filter>add widget</filter>
        <filter>set style</filter>
        <filter>write fragment tag</filter>
      </renderer>

    </engine>

  </extension>

</component>